<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      ref="actreprocdef"
      hideFilterBtn
      openIndex
			operaColumnWidth="120"
      :pageInfo="pager"
      :listData="tableData"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      :menuList="menuList"
      :listLayout="['menu','filter']"
      :filterList="filterList"
      @btn-click="handleBtnClick"
      @menu-click="handleMenuClick"
    ></dataList>
  </basic-container>
</template>

<script>
import { fetchList, kickOut } from '~/admin/api/online-user'
export default {
  name: "actreprocdef",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData()
    this.dictTypes = this.getDict('dict_type')
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      filterList: [{ label: '关键词', inputType: 'input', name: 'filter', placeholder: '可输入用户名、用户昵称、部门、登录IP、登陆地点、浏览器类型进行查询', defaultValue: '' }],
      // 页面loading
      loading: false
    }
  },
  computed: {
    // 头部按钮
    menuList () {
      return this.getPermissions('sys_user_export') ? ['export'] : []
    },
    //数据表头
    dataInfo () {
      return [
        { label: '用户名', prop: 'userName', width: "120", 'show-overflow-tooltip': true  },
        { label: '用户昵称', prop: 'nickName', width: "150", 'show-overflow-tooltip': true  },
        { label: '部门', prop: 'dept', width: "260", 'show-overflow-tooltip': true },
        { label: '登录ip', prop: 'ip', width: "180", 'show-overflow-tooltip': true  },
        { label: '登录地点', prop: 'address', width: "180", 'show-overflow-tooltip': true  },
        { label: '浏览器', prop: 'browser', width: "150", 'show-overflow-tooltip': true  },
        { label: '登录时间', prop: 'loginTime', width: "180" }
      ]
    },
    //操作按钮
    operaInfo () {
      return [
        { label: '强退', name: 'tickOut', verify: () => this.getPermissions('sys_user_tickOut') }
      ]
    }
  },
  methods: {
    // 获取列表
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      requestData.page = requestData.current - 1
      requestData.sort = 'id,desc'
      delete requestData.current
      fetchList(requestData)
        .then(res => {
          const { totalElements, content } = res.data;
          this.tableData = content;
          this.params = requestData;
          let size = Math.ceil(content.length / 10) * 10;
          let total = totalElements;
          let current = requestData.page + 1
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case "export":
          this.publicExport('在线用户数据', '/auth/online/download', this.params);
          break;
        default:
          this.$message(type);
          break;
      }
    },
    // 按钮点击监听
    handleBtnClick ({ type, row }) {
      switch (type) {
        case 'tickOut':
          this.kickArr(row)
          break;
        default:
          break
      }
    },
    //强退
    kickArr (row) {
      let arr = []
      arr.push(row.key)
      this.$confirm('是否确定强制退出该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return kickOut(arr)
      }).then(data => {
        this.$message.success('退出成功')
        this.getListData({ current: 1 })
      })
    },
  }
}
</script>
